<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="我的场馆" name="first">
        <baseConfig />
      </el-tab-pane>
      <el-tab-pane label="场馆设施" name="second">
        <gym />
      </el-tab-pane>
      <el-tab-pane label="其他设置" name="third">
        <otherConfig />
      </el-tab-pane>
      <!--      <el-tab-pane label="小程序设置" name="fourth">-->
      <!--        <maConfig />-->
      <!--      </el-tab-pane>-->
    </el-tabs>
  </div>
</template>

<script setup name="Facilities">
import { getCurrentInstance, onMounted } from '@vue/runtime-core'
import { ref } from 'vue'
import baseConfig from './baseConfig'
import gym from './gym'
import otherConfig from './otherConfig'


const { proxy } = getCurrentInstance()
const activeName = ref('')

onMounted(() => {
  if (proxy.$route.query.tab) {
    activeName.value = proxy.$route.query.tab
  } else {
    changeTab('first')
    activeName.value = 'first'
  }
})

const changeTab = (tabName) => {
  const url = proxy.$route.href
  let newUrl
  if (url.indexOf('?') === -1) {
    newUrl = `${url}?tab=${tabName}`
  } else {
    newUrl = `${url.substr(0, url.indexOf('?'))}?tab=${tabName}`
  }
  window.history.replaceState('', '', newUrl)
}

function handleClick(tab, event) {
  changeTab(tab.paneName)
}

</script>

<style scoped>
	.app-container{background: #fff;}
</style>
